<html><head><title>Cal Planner</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0px;
  }
  #container {
    width: 100%;
  }
  
  #inner {
    margin: 0 auto;
    width: 960px;
    min-height: 700px;
  }
  
  #navi {
    width: 188px;
    display: inline-block;
    position: relative;
    text-align: center;
    height: 100%;
  }
  
  #content {
    width: 760px;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    border-left: 1px solid silver;
  }
  
  #header {
    background-color: black;
    width: 100%;
  }
  
  #add_new {
    margin: 10px;
    border: 1px solid silver;
    padding: 10px;
  }
  
  .post {
    border: 1px solid silver;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
  }
  
  .post-top {
    width: 100%;
  }
  
  .post-class {
    display: inline-block;
  }
  
  .post-name {
    display: inline-block;
    margin: 0px auto;
  }
  
  .post-due {
    display: inline-block;
    float: right;
  }
  
  .post-done {
    background-color: lightblue;
  }
</style>

</head>

<body>
<div id='header'>Header</div>
<div id='container'>
  <div id='inner'>
    <div id='navi'>
      Joe Smith<br>
      <div style="background-color: gray; width: 100px; height: 100px; margin: 10px auto;"></div><br>
      <li>CS61A
      <li>CS61B
      <li>Math 54
      <li>Bio 1B
      <li>Physics 7A
      <li>PMB 160
    </div>
    <div id='content'>
      <div id='add_new'>
        <div id='add_new_text'>Add a new item</div>
        Class:
        <select>
          <option value='CS61A'>---</option>
          <option value='CS61A'>CS61A</option>
          <option value='CS61B'>CS61B</option>
        </select><br>
        Name: <input type='text'><br>
        Due: <input type='text'>
        <input type='submit'>
      </div>
      <div id='posts'>
        <div class='post'>
          <div class='post-top'>
            <div class='post-class'>CS61A,</div>
            <div class='post-name'>HW1</div>
            <div class='post-due'>
              Fri <div class='post-done'>Done</div>
            </div>
          </div>
          <div class='post-discussion'> 
            Discussion here
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>